<template>
  <div>
    <el-container>
      <el-header>站长后台</el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <!-- 新增员工按钮 -->
            <el-button type="success" size="small" @click="addEmploy">员 工 报 道</el-button>

            <!-- 员工信息表格 -->
            <el-table :data="employs" style="width: 100%">
              <el-table-column prop="employeName" label="员工名称" width="180"></el-table-column>
              <el-table-column prop="identityCard" label="身份证" width="180"></el-table-column>
              <el-table-column prop="phone" label="电话号码" width="180"></el-table-column>
              <el-table-column prop="qq" label="qq号" width="180"></el-table-column>
              <el-table-column prop="state" label="状态" width="180" :formatter="formatState"></el-table-column>
              <el-table-column label="操作" width="350">
                <template #default="scope">
                  <!-- 更改员工状态按钮 -->
                  <el-button v-show="scope.row.state!=1" type="success" size="small" @click="changeState(scope.row)">更改员工状态</el-button>
                  <!-- 开除员工按钮，仅当状态为1时显示 -->
                  <el-button v-show="scope.row.state==2" type="danger" size="small" @click="readyDel(scope.row)">开除员工</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-main>

      <!-- 新增员工数据对话框 -->
      <el-dialog v-loading="loading" title="新增员工数据" :visible.sync="showAddWindow" width="80%" @open="onDialogOpen">
        <el-form :model="newEmploy" label-width="120px">
          <el-form-item label="员工名称">
            <el-input v-model="newEmploy.employeName"></el-input>
          </el-form-item>
          <el-form-item label="身份证">
            <el-input v-model="newEmploy.identityCard" ></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="newEmploy.phone" ></el-input>
          </el-form-item>
          <el-form-item label="qq号">
            <el-input v-model="newEmploy.qq" ></el-input>
          </el-form-item>
          <el-form-item label="隶属站点id">
            <el-input v-model="newEmploy.stationId" disabled="disabled"></el-input>
          </el-form-item>
        </el-form>
        <!-- 执行新增按钮 -->
        <el-button type="primary" @click="addNow">执行新增</el-button>
        <!-- 关闭对话框按钮 -->
        <el-button @click="showAddWindow = false" type="danger" round>关 闭</el-button>
      </el-dialog>

      <!-- 地图选择位置对话框 -->
      <div v-show="showMap">
        <div id="container" style="width: 100%; height: 400px;"></div>
        <!-- 确认选择按钮 -->
        <el-button type="primary" @click="confirmLocation">确认选择</el-button>
        <!-- 关闭地图对话框按钮 -->
        <el-button @click="showMap = false" type="danger" round>关 闭</el-button>
      </div>

      <!-- 分页组件 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum"
        :page-sizes="[3, 4, 5]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </el-container>

    <!-- 更换员工负责人对话框 -->
    <el-dialog v-loading="loading" title="更换员工负责人" :visible.sync="showChangeWindow" width="80%" >
      <el-form :model="newHandler" label-width="120px">
        <el-form-item label="请选择新的负责人">
          <el-select v-model="newHandlerId" placeholder="请选择" @change="showChange">
            <el-option v-for="item in usefulHandlerEx" :key="item.accountId" :label="item.employeName" :value="item.accountId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 立即修改按钮 -->
      <el-button type="primary" @click="changeHandlerNow">立即修改</el-button>
      <!-- 关闭对话框按钮 -->
      <el-button @click="showChangeWindow = false" type="danger" round>关 闭</el-button>
    </el-dialog>

    <!-- 删除员工对话框 -->
    <el-dialog v-loading="loading" title="开除员工" :visible.sync="showDelWindow" width="80%" >
      <div style="margin-bottom: 20px;">
        确认要开除吗？
      </div>
      <!-- 立即删除按钮 -->
      <el-button type="primary" @click="del()">立即开除</el-button>
      <!-- 关闭对话框按钮 -->
      <el-button @click="showDelWindow = false" type="danger" round>关 闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "EmployBoss",
    data() {
      return {
        // 选择的行
        selectRow: null,
        // 是否显示删除窗口
        showDelWindow: false,
         //站点id
        stationId: 0,
        //新负责人id
        newHandlerId: null,
        //可用的负责人集合
        usefulHandlerEx: [],
        //新负责人对象
        newHandler: null,
        // 是否显示更换员工负责人窗口
        showChangeWindow: false,
        // 选择的负责人
        choosenHandler: null,
        // 是否显示地图
        showMap: false,
        // 是否显示新增员工窗口
        showAddWindow: false,
        // 加载状态
        loading: false,
        // 员工列表
        employs: [],
        // 新增员工信息
        newEmploy: {
          employeName: "",
          longitude: "",
          latitude: "",
          card: "",
          startTime: "",
          endTime: "",
          introduce: ""
        },
        // 可用的负责人
        useFulHandler: [],
        // 分页信息
        page: {
          pageNum: 1,
          pageSize: 5,
          total: 0
        },
        // 地图对象
        map: null,
        // 地图标记
        marker: null,
        stationId:null
      };
    },
    mounted() {
      // 组件挂载后加载员工数据
      this.stationId=localStorage.getItem('stationId')
      this.loadAllEmploys(this.page.pageNum, this.page.pageSize);
    },
    methods: {
      // 准备删除员工
      readyDel(row) {
        this.showDelWindow = true;
        this.selectRow = row;
      },
      // 更改员工状态
      changeState(row) {
        this.$http.post("/staff/employee/updateEmployeeState/",{
          accountId:row.accountId,
          state:row.state==0?2:0
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success("修改成功!");
            this.loadAllEmploys(this.page.pageNum, this.page.pageSize);
          } else {
            this.$message.error("修改失败: " + resp.data.message);
          }
        });
      },
      // 删除员工
      del() {
        this.showDelWindow = false;
        this.$http.get("/staff/employee/del/" + this.selectRow.id).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success("删除成功!");
            this.loadAllEmploys(this.page.pageNum, this.page.pageSize);
          } else {
            this.$message.error("删除失败: " + resp.data.message);
          }
        });
      },
      // 显示新的负责人
      showChange() {
        console.log("下面是新的handler :")
        console.log(this.newHandlerId);
      },
      // 立即修改负责人
      changeHandlerNow() {
        this.showChangeWindow = false;
        this.$http.get("/station/station/changeHandler/" + this.newHandlerId + "/" + this.stationId).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success("更改成功");
            this.loadAllEmploys(this.page.pageNum, this.page.pageSize);
          } else {
            this.$message.error("更改失败: " + resp.data.message);
          }
        });
      },
      // 格式化状态
      formatState(row) {
        switch (row.state) {
          case 0:
            return "正常";
          case 1:
            return "删除";
          case 2:
            return "禁用";
          default:
            return "未知";
        }
      },
      // 处理每页显示数量变化
      handleSizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.loadAllEmploys(this.page.pageNum, this.page.pageSize);
      },
      // 处理当前页码变化
      handleCurrentChange(pageNum) {
        this.page.pageNum = pageNum;
        this.loadAllEmploys(this.page.pageNum, this.page.pageSize);
      },
      // 显示位置选择地图
      showLocation() {
        this.showMap = true;
        this.showAddWindow = false;
      },
      // 对话框打开时初始化地图
      onDialogOpen() {
        if (!this.map) {
          setTimeout(() => {
            this.initMap();
          });
        }
      },
      // 初始化地图
      initMap() {
        console.log("Initializing map...");
        this.map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 10,
          center: [116.397428, 39.90923], // 初始化地图中心点
        });
        this.map.on("click", this.onMapClick);
        console.log("Map initialized.");
      },
      // 地图点击事件处理
      onMapClick(e) {
        this.newEmploy.longitude = e.lnglat.getLng();
        this.newEmploy.latitude = e.lnglat.getLat();
        if (this.marker) {
          this.marker.setPosition(e.lnglat);
        } else {
          this.marker = new AMap.Marker({
            position: e.lnglat,
            map: this.map,
          });
        }
      },
      // 显示可用的负责人，但排除某一个
      showUsefulHandlerExceptOne(id) {
        console.log(id);
        this.$http.get("/staff/employee/showUsefulHandlerExceptOne/" + id).then(resp => {
          this.usefulHandlerEx = resp.data.data;
        });
      },
      // 新增员工按钮点击事件
      addEmploy() {
        this.newEmploy.stationId=this.stationId
        this.showAddWindow = true;
      },
      // 显示可用的负责人
      showUsefulHandler() {
        this.$http.get("/staff/employee/findUsefulHandler").then(resp => {
          this.useFulHandler = resp.data.data;
        });
      },
      // 显示选中的负责人
      showNew() {
        console.log("选中的站长如下: ");
        console.log(this.choosenHandler);
      },
      // 执行新增员工操作
      addNow() {
        this.newEmploy.curatorId = this.choosenHandler;
        this.$http.post("/staff/employee/addEmployee", this.newEmploy).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success("员工新增成功");
            this.showAddWindow = false;
            this.loadAllEmploys(this.page.pageNum, this.page.pageSize);
          } else {
            this.$message.error("员工新增失败: " + resp.data.message);
          }
        });
      },
      // 加载所有员工数据
      loadAllEmploys(pageNum, pageSize) {
        this.$http.get("/staff/employee/findAllByStationIdWithoutHandler", {
          params: {
            pageNum: pageNum,
            pageSize: pageSize
          }
        }).then(response => {
          console.log(response.data.data)
          const result = response.data.data; // 解析后端返回的数据
          this.page.pageNum = result.current; // 当前页码
          this.page.pageSize = result.size; // 每页数量
          this.page.total = result.total; // 总条目数
          this.employs = result.records; // 当前页的数据
        }).catch(error => {
          console.error("Error fetching employs:", error);
        });
      },
      // 更换员工负责人
      changeHandler(row) {
        this.showUsefulHandlerExceptOne(row.curatorId);
        this.stationId = row.id;
        this.showChangeWindow = true;
        console.log("Change handler for:", row);
      },
      // 确认位置选择
      confirmLocation() {
        this.showMap = false;
        this.showAddWindow = true;
        this.$message.success("位置选择成功");
      },
    },
  };
</script>



<style scoped>
</style>
